<template>
  <div class="Porderdetail">
    <headshow msg="订单编号:"></headshow>
    <div class="check-title">
      <span>123456</span>
      <div class="daiduihuan">
        <span>订单状态：</span>
        <span class="active2">待付款</span>
      </div>
      <div class="jiliduihuan">
        <div class="lijidu">立即支付</div>
        <div class="lijidu quxiao">取消订单</div>
      </div>
      </div>
    <div class="checkdetail-content">
      <div class="checkdetail-min">
        <p>
          <span>支付方式</span>
          <span>积分</span>
        </p>
        <p>
          <span>支付流水号</span>
          <span>123456789</span>
        </p>
        <p>
          <span>下单时间</span>
          <span></span>
        </p>
        <p>
          <span>支付时间</span>
          <span></span>
        </p>
        <p>
          <span>发货时间</span>
          <span></span>
        </p>
        <p>
          <span>收货时间</span>
          <span></span>
        </p>
        <p>
          <span>订单备注</span>
          <span>希望包装的严实点，不要有破损情况，谢谢！</span>
        </p>
      </div>
      <p class="check-p">收货人信息</p>
      <div class="checkdetail-min">
        <p>
          <span>收货人姓名</span>
          <span></span>
        </p>
        <p>
          <span>地址</span>
          <span>河南省郑州市</span>
        </p>
        <p>
          <span>联系方式</span>
          <span>15670957013</span>
        </p>
      </div>
      <p class="check-p">物流信息</p>
      <div class="checkdetail-min">
        <p>
          <span>联系人：</span>
          <span>张小小</span>
        </p>
        <p>
          <span>联系方式：</span>
          <span>1567900000</span>
        </p>
      </div>

      <table class="jifentable">
        <tr>
          <th colspan="2">爱果果水果店</th>
          <th>规格</th>
          <th>单价</th>
          <th>数量</th>
          <th>金额</th>
        </tr>
        <tdvue
          v-for="peo in list "
          :key="peo.id"
          :orderNumber="peo.orderNumber"
          :orderData="peo.orderData"
          :orderStatus="peo.orderStatus"
          :orderName="peo.orderName"
          :orderNorms="peo.orderNorms"
          :orderImg="peo.orderImg"
          :orderNum="peo.orderNum"
          :orderPrice="peo.orderPrice"
          :orderNewPrice="peo.orderNewPrice"
        ></tdvue>
      </table>
      <p class="sumjifen">
        实付金额:
        <span>{{totalSumAll}}</span>
      </p>
      <p class="sumjifen2">
        <buttShow msg="取消订单" class="quxiaodui quxiaodui2"></buttShow>
        <buttShow msg="立即支付" class="quxiaodui"></buttShow>
      </p>
    </div>
  </div>
</template>

<script>
//头部小组件
import headshow from "@/components/headshow.vue";
//按钮小组件
import buttShow from "@/components/button.vue";
//积分详情的td小组件
import tdvue from "@/components/td.vue";

export default {
  components: {
    headshow,
    buttShow,
    tdvue
  },
  // computed: {
  // 	totalSumAll() {
  // 		let totalSumAll = 0;
  // 		this.dataInfo.map((item) => {
  // 			totalSumAll += orderScore
  // 		})
  // 		return totalSumAll
  // 	}
  // },
  data() {
    return {
      list: [
        {
          orderNumber: "1234",
          orderData: "2015-1-1 12:12:12",
          orderStatus: "已完成",
          orderImg: require("../assets/images/banner-13.png"),
          orderName: "云南丑苹果6个装",
          orderNorms: "6个装",
          orderNum: "1",
          orderPrice: "￥569",
          orderNewPrice: "￥569"
        },
        {
          orderNumber: "1234",
          orderData: "2015-1-1 12:12:12",
          orderStatus: "已完成",
          orderImg: require("../assets/images/banner-13.png"),
          orderName: "云南丑苹果6个装",
          orderNorms: "6个装",
          orderNum: "1",
          orderPrice: "￥569",
          orderNewPrice: "￥569"
        },
        {
          orderNumber: "1234",
          orderData: "2015-1-1 12:12:12",
          orderStatus: "已完成",
          orderImg: require("../assets/images/banner-13.png"),
          orderName: "云南丑苹果6个装",
          orderNorms: "6个装",
          orderNum: "1",
          orderPrice: "￥569",
          orderNewPrice: "￥569"
        },
        {
          orderNumber: "1234",
          orderData: "2015-1-1 12:12:12",
          orderStatus: "已完成",
          orderImg: require("../assets/images/banner-13.png"),
          orderName: "云南丑苹果6个装",
          orderNorms: "6个装",
          orderNum: "1",
          orderPrice: "￥569",
          orderNewPrice: "￥569"
        }
      ]
    };
  }
};
</script>

<style>
 .Porderdetail{
    width: 100%;
  /* height: 488px; */
  border: 1px solid #e7e7e7;
  /* margin-left:1%; */
  background: #fff;
  /* z-index: 3; */
   }
.checkdetail-min {
  border: 1px solid #e7e7e7;
  background-color: #f9f9f9;
  color: #666666;
  font-size: 15px;
  line-height: 35px;
  padding-left: 20px;
}

.lijidu {
  color: #fff;
  padding: 9px 15px;
  font-size: 12px;
  background: #498e3d;
  display: inline-block;
  border-radius: 4px;
}

.quxiao {
  background-color: #999999;
  margin-left: 20px;
}

table {
  margin-top: 20px;
}

.check-title {
  position: relative;
  top: -40px;
  left: 100px;
  font-size: 17px;
  padding-right: 20px;
  width: 87%;
}

.check-title div {
  display: inline-block;
}

.check-title .daiduihuan {
  margin-left: 20%;
}

.check-title .jiliduihuan {
  position: absolute;
  right: 20px;
}

.checkdetail-content {
  padding: 0px 20px 20px 20px;
}

.check-p {
  color: #498e3d;
  line-height: 57px;
  font-size: 15px;
  padding-left: 20px;
}

.checkdetail-min p span:nth-of-type(1) {
  width: 12.13%;
  display: inline-block;
}

.jifentable {
  border-bottom: none;
  border:1px solid #e7e7e7;
}

.jifentable th {
  text-align: left;
  background-color: #f2f2f2;
  padding: 15px 0px;
}

.jifentable th:nth-of-type(1) {
  padding-left: 20px;
}

.jifentable td:nth-of-type(1) {
  padding: 20px;
}
.sumjifen {
  font-size: 17px;
  margin-bottom: 30px;
  text-align: end;
}
.sumjifen span {
  color: #ffb7b7;
  font-size: 20px;
}
.sumjifen2 {
  text-align: end;
}
.quxiaodui2 {
  background: #999999;
}
.quxiaodui {
  margin-left: 40px;
  padding: 9px 20px;
}
</style>
